import 'dart:math';
import 'package:flutter/material.dart';

void main() {
  runApp(const ContainerComponentsApp());
}

class ContainerComponentsApp extends StatelessWidget {
  const ContainerComponentsApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '容器类组件演示',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const ContainerComponentsPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class ContainerComponentsPage extends StatefulWidget {
  const ContainerComponentsPage({super.key});

  @override
  State<ContainerComponentsPage> createState() => _ContainerComponentsPageState();
}

class _ContainerComponentsPageState extends State<ContainerComponentsPage> with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;
  late TabController _tabController;
  bool _showAppBar = true;
  double _rotation = 0.0;
  double _scale = 1.0;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 5.7.1 Scaffold - 页面骨架
      // 5.7.2 AppBar - 应用栏
      appBar: _showAppBar
          ? AppBar(
        title: const Text('容器类组件演示'),
        centerTitle: true,
        actions: [
          IconButton(
            icon: const Icon(Icons.info),
            onPressed: () {
              showDialog(
                context: context,
                builder: (context) => AlertDialog(
                  title: const Text('关于'),
                  content: const Text('本应用展示了Flutter中各种容器类组件的使用'),
                  actions: [
                    TextButton(
                      onPressed: () => Navigator.pop(context),
                      child: const Text('确定'),
                    ),
                  ],
                ),
              );
            },
          ),
        ],
        // 5.7.5 底部Tab导航栏
        bottom: TabBar(
          controller: _tabController,
          tabs: const [
            Tab(icon: Icon(Icons.widgets), text: '组件'),
            Tab(icon: Icon(Icons.transform), text: '变换'),
            Tab(icon: Icon(Icons.crop), text: '剪裁'),
          ],
        ),
      )
          : null,
      // 5.7.3 抽屉菜单Drawer
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue.shade700,
              ),
              child: const Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  CircleAvatar(
                    radius: 30,
                    backgroundColor: Colors.white,
                    child: Icon(Icons.person, size: 40, color: Colors.blue),
                  ),
                  SizedBox(height: 10),
                  Text('容器组件演示',
                      style: TextStyle(color: Colors.white, fontSize: 20)),
                  Text('v1.0.0', style: TextStyle(color: Colors.white70)),
                ],
              ),
            ),
            ListTile(
              leading: const Icon(Icons.home),
              title: const Text('主页'),
              onTap: () {
                Navigator.pop(context);
                setState(() => _selectedIndex = 0);
              },
            ),
            ListTile(
              leading: const Icon(Icons.settings),
              title: const Text('设置'),
              onTap: () {
                Navigator.pop(context);
                setState(() => _selectedIndex = 1);
              },
            ),
            ListTile(
              leading: const Icon(Icons.help),
              title: const Text('帮助'),
              onTap: () {
                Navigator.pop(context);
                setState(() => _selectedIndex = 2);
              },
            ),
            const Divider(),
            ListTile(
              leading: const Icon(Icons.exit_to_app),
              title: const Text('退出'),
              onTap: () => Navigator.pop(context),
            ),
          ],
        ),
      ),
      // 5.7.4 FloatingActionButton
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _showAppBar = !_showAppBar;
          });
        },
        tooltip: '切换应用栏',
        child: Icon(_showAppBar ? Icons.visibility_off : Icons.visibility),
      ),
      // 5.7.6 页面body
      body: TabBarView(
        controller: _tabController,
        children: [
          // 第一个标签页 - 组件
          SingleChildScrollView(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 5.1 填充(Padding)
                _buildSectionTitle('5.1 填充(Padding)'),
                const SizedBox(height: 10),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    _buildPaddedBox(Colors.red, EdgeInsets.zero),
                    _buildPaddedBox(Colors.green, const EdgeInsets.all(8)),
                    _buildPaddedBox(Colors.blue, const EdgeInsets.symmetric(vertical: 16, horizontal: 8)),
                    _buildPaddedBox(Colors.orange, const EdgeInsets.only(left: 20, top: 10)),
                  ],
                ),

                const SizedBox(height: 20),

                // 5.2 装饰容器(DecoratedBox)
                _buildSectionTitle('5.2 装饰容器(DecoratedBox)'),
                const SizedBox(height: 10),
                Wrap(
                  spacing: 15,
                  runSpacing: 15,
                  children: [
                    _buildDecoratedBox(
                      gradient: LinearGradient(colors: [Colors.blue.shade300, Colors.blue.shade700]),
                      borderRadius: BorderRadius.circular(10),
                    ),
                    _buildDecoratedBox(
                      gradient: RadialGradient(colors: [Colors.purple.shade300, Colors.purple.shade700]),
                      shape: BoxShape.circle,
                    ),
                    _buildDecoratedBox(
                      gradient: LinearGradient(
                        colors: [Colors.green.shade300, Colors.green.shade700],
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                      ),
                      borderRadius: BorderRadius.circular(20),
                    ),
                    _buildDecoratedBox(
                      color: Colors.orange,
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black.withOpacity(0.3),
                          blurRadius: 10,
                          offset: const Offset(5, 5),
                        )
                      ],
                      borderRadius: BorderRadius.circular(15),
                    ),
                  ],
                ),

                const SizedBox(height: 20),

                // 5.4 容器组件(Container)
                _buildSectionTitle('5.4 容器组件(Container)'),
                const SizedBox(height: 10),
                Center(
                  child: Container(
                    width: 200,
                    height: 120,
                    padding: const EdgeInsets.all(16),
                    margin: const EdgeInsets.symmetric(vertical: 10),
                    decoration: BoxDecoration(
                      color: Colors.blue.shade50,
                      borderRadius: BorderRadius.circular(15),
                      border: Border.all(color: Colors.blue.shade300, width: 2),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.blue.shade100,
                          blurRadius: 10,
                          spreadRadius: 2,
                        )
                      ],
                    ),
                    child: const Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.brush, size: 40, color: Colors.blue),
                        SizedBox(height: 8),
                        Text('容器组件示例', style: TextStyle(fontWeight: FontWeight.bold)),
                      ],
                    ),
                  ),
                ),

                const SizedBox(height: 20),

                // 5.6 空间适配(FittedBox)
                _buildSectionTitle('5.6 空间适配(FittedBox)'),
                const SizedBox(height: 10),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    _buildFittedBoxExample('缩放适配', BoxFit.scaleDown),
                    _buildFittedBoxExample('填充适配', BoxFit.fill),
                    _buildFittedBoxExample('覆盖适配', BoxFit.cover),
                  ],
                ),
              ],
            ),
          ),

          // 第二个标签页 - 变换
          SingleChildScrollView(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 5.3 变换(Transform)
                _buildSectionTitle('5.3 变换(Transform)'),
                const SizedBox(height: 10),

                // 旋转
                _buildSubtitle('旋转变换'),
                Slider(
                  value: _rotation,
                  min: 0,
                  max: 1.0,
                  onChanged: (value) {
                    setState(() {
                      _rotation = value;
                    });
                  },
                ),
                Center(
                  child: Transform.rotate(
                    angle: _rotation * 2 * 3.14159,
                    child: Container(
                      width: 100,
                      height: 100,
                      color: Colors.blue,
                      child: const Center(
                        child: Icon(Icons.rotate_right, color: Colors.white, size: 40),
                      ),
                    ),
                  ),
                ),

                const SizedBox(height: 20),

                // 缩放
                _buildSubtitle('缩放变换'),
                Slider(
                  value: _scale,
                  min: 0.5,
                  max: 2.0,
                  onChanged: (value) {
                    setState(() {
                      _scale = value;
                    });
                  },
                ),
                Center(
                  child: Transform.scale(
                    scale: _scale,
                    child: Container(
                      width: 100,
                      height: 100,
                      color: Colors.green,
                      child: const Center(
                        child: Icon(Icons.zoom_in, color: Colors.white, size: 40),
                      ),
                    ),
                  ),
                ),

                const SizedBox(height: 20),

                // 平移
                _buildSubtitle('平移变换'),
                Center(
                  child: Transform.translate(
                    offset: const Offset(30, 0),
                    child: Container(
                      width: 100,
                      height: 100,
                      color: Colors.orange,
                      child: const Center(
                        child: Text('平移', style: TextStyle(color: Colors.white)),
                      ),
                    ),
                  ),
                ),

                const SizedBox(height: 20),

                // 矩阵变换
                _buildSubtitle('矩阵变换'),
                Center(
                  child: Transform(
                    transform: Matrix4.identity()
                      ..setEntry(3, 2, 0.001) // 透视
                      ..rotateX(0.2)
                      ..rotateY(0.3),
                    alignment: FractionalOffset.center,
                    child: Container(
                      width: 150,
                      height: 150,
                      color: Colors.purple,
                      child: const Center(
                        child: Text('3D变换', style: TextStyle(color: Colors.white, fontSize: 20)),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),

          // 第三个标签页 - 剪裁
          SingleChildScrollView(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 5.5 剪裁(clip)
                _buildSectionTitle('5.5 剪裁(clip)'),
                const SizedBox(height: 10),

                _buildSubtitle('圆形剪裁'),
                Center(
                  child: ClipOval(
                    child: Container(
                      width: 120,
                      height: 120,
                      color: Colors.blue,
                      child: const Center(
                        child: Text('圆形', style: TextStyle(color: Colors.white, fontSize: 20)),
                      ),
                    ),
                  ),
                ),

                const SizedBox(height: 20),

                _buildSubtitle('圆角矩形剪裁'),
                Center(
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(20),
                    child: Container(
                      width: 200,
                      height: 100,
                      color: Colors.green,
                      child: const Center(
                        child: Text('圆角矩形', style: TextStyle(color: Colors.white, fontSize: 20)),
                      ),
                    ),
                  ),
                ),

                const SizedBox(height: 20),

                _buildSubtitle('路径剪裁'),
                Center(
                  child: ClipPath(
                    clipper: StarClipper(),
                    child: Container(
                      width: 150,
                      height: 150,
                      color: Colors.orange,
                      child: const Center(
                        child: Text('星形', style: TextStyle(color: Colors.white, fontSize: 20)),
                      ),
                    ),
                  ),
                ),

                const SizedBox(height: 20),

                _buildSubtitle('物理模型剪裁'),
                Center(
                  child: PhysicalModel(
                    color: Colors.purple,
                    elevation: 10,
                    shadowColor: Colors.purple.shade800,
                    borderRadius: BorderRadius.circular(15),
                    child: const SizedBox(
                      width: 180,
                      height: 80,
                      child: Center(
                        child: Text('物理模型', style: TextStyle(color: Colors.white, fontSize: 20)),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSectionTitle(String title) {
    return Text(
      title,
      style: const TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.bold,
        color: Colors.blue,
      ),
    );
  }

  Widget _buildSubtitle(String title) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: Text(
        title,
        style: const TextStyle(
          fontSize: 16,
          fontWeight: FontWeight.w600,
          color: Colors.blueGrey,
        ),
      ),
    );
  }

  Widget _buildPaddedBox(Color color, EdgeInsets padding) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 10),
      child: Column(
        children: [
          Container(
            width: 70,
            height: 70,
            color: color,
            child: Padding(
              padding: padding,
              child: Container(color: Colors.white),
            ),
          ),
          const SizedBox(height: 5),
          Text(
            padding.toString().replaceAll('EdgeInsets', ''),
            style: const TextStyle(fontSize: 10),
          )
        ],
      ),
    );
  }

  Widget _buildDecoratedBox({
    Color? color,
    Gradient? gradient,
    List<BoxShadow>? boxShadow,
    BorderRadius? borderRadius,
    BoxShape shape = BoxShape.rectangle,
  }) {
    return DecoratedBox(
      decoration: BoxDecoration(
        color: color,
        gradient: gradient,
        boxShadow: boxShadow,
        borderRadius: borderRadius,
        shape: shape,
      ),
      child: const SizedBox(
        width: 80,
        height: 80,
        child: Icon(Icons.brush, color: Colors.white, size: 40),
      ),
    );
  }

  Widget _buildFittedBoxExample(String title, BoxFit fit) {
    return Column(
      children: [
        Container(
          width: 100,
          height: 60,
          color: Colors.grey.shade200,
          padding: const EdgeInsets.all(5),
          child: FittedBox(
            fit: fit,
            child: Container(
              width: 80,
              height: 40,
              color: Colors.amber,
              child: Center(
                child: Text(
                  'FittedBox',
                  style: TextStyle(
                    fontSize: 16,
                    color: Colors.blue.shade800,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ),
        ),
        const SizedBox(height: 5),
        Text(title, style: const TextStyle(fontSize: 12)),
      ],
    );
  }
}

// 自定义星形剪裁器
class StarClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    final center = Offset(size.width / 2, size.height / 2);
    const radius = 70.0;
    const spikes = 5;
    const rotation = -3.14159 / 2;

    path.moveTo(
      center.dx + radius * cos(rotation),
      center.dy + radius * sin(rotation),
    );

    for (int i = 1; i <= spikes; i++) {
      // 外点
      double x = center.dx + radius * cos(rotation + 2 * 3.14159 * i / spikes);
      double y = center.dy + radius * sin(rotation + 2 * 3.14159 * i / spikes);
      path.lineTo(x, y);

      // 内点
      x = center.dx + (radius / 2) * cos(rotation + 2 * 3.14159 * i / spikes + 3.14159 / spikes);
      y = center.dy + (radius / 2) * sin(rotation + 2 * 3.14159 * i / spikes + 3.14159 / spikes);
      path.lineTo(x, y);
    }

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}